import React from 'react';
import "./index.less"
import {
    Toast,
    NoticeBar,
    Carousel,
    WingBlank,
    Grid,
    Tabs,
    WhiteSpace,
    ListView,
    Button,
    Modal,
} from 'antd-mobile';
const alert = Modal.alert;
import TabBarExample from 'components/tabBar'
import TopBarExample from 'components/topBar'



export default class Order extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            bgColor:'',
            tabs: [
                {
                    title: '全部',
                    value: 0
                },
                {
                    title: '待付款',
                    value: 1
                },
                {
                    title: '待配送',
                    value: 2
                },
                {
                    title: '待提货',
                    value: 3
                },
                {
                    title: '已提货',
                    value: 4
                },
                {
                    title: '售后服务',
                    value: 5
                },
            ],
            goodsList: [1,2,3,4,5,6]
        }
    }

    componentDidMount() {
        window.onscroll = function() {
            const htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;  //获取网页的总高度
            const clientHeight = document.body.clientHeight || document.documentElement.clientHeight;  //clientHeight是网页在浏览器中的可视高度
            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;   //scrollTop是浏览器滚动条的top位置
            if (scrollTop >= (htmlHeight - clientHeight - 200) && this.state.isLoading === false) {
                this.setState({
                    isLoading: true
                })
                // pagenum++; // 页码+1
                // render();
            }
        }.bind(this)
    }

    // 切换标签
    toggleTab = (res) => {
        console.log(res)
    };

    // 确认收货
    receivingGood = (res) => {
        // this.props.history.push({pathname:'/order/detail', state:{id:123}})
    };

    // 订单详情
    goOrderDetail = (res) => {
        this.props.history.push({pathname:'/order/detail', state:{id:123}})
    };

    // 返回上一页
    addVConsolePackage = () => {
        this.props.history.goBack()
    };


    render() {
        return (
            <div className="order">
                <TopBarExample title={'订单'} autoBack={this.addVConsolePackage} showBack={true}></TopBarExample>
                    <WhiteSpace />
                    <Tabs tabs={this.state.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} />} onTabClick={this.goDetail}/>
                    <div className="order-div">
                        {
                            this.state.goodsList.map((res, index) => {
                                return <div key={index} className="order-item">
                                    <div className="order-item-top">
                                        <div style={{fontWeight: '600'}}>下单时间：2024-08-24 20：40：19</div>
                                        <div>售后完成</div>
                                    </div>
                                    <div className="order-item-content">
                                        <div className="item-img">
                                            <img
                                                src={`https://zos.alipayobjects.com/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png`}
                                                alt=""
                                                style={{ width: '80px', height: '80px',}}
                                                onLoad={() => {
                                                    // fire window resize event to change height
                                                }}
                                            />
                                        </div>
                                        <div className="item-text">
                                            【热卖商品】{'测试行频测试行频测试行频测试行频测试行频行频测试行频测试行行频测试行频测试行'}
                                        </div>
                                        <div className="item-num">
                                            <div>128礼品卡</div>
                                            <div>x1</div>
                                        </div>
                                    </div>
                                    <div  className="order-item-price">
                                        总价：128礼品卡
                                    </div>
                                    <div className="order-item-bottom">
                                        <div className="item-bottom1" onClick={() =>
                                            alert('提示', '是否确认收货?', [
                                                { text: '取消', onPress: () => console.log('cancel') },
                                                { text: '确认', onPress: () => this.receivingGood },
                                            ])}>确认收货</div>
                                        <div className="item-bottom2" onClick={() => this.goOrderDetail(res)}>查看详情</div>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                {/*<TabBarExample selectedTab={'home'}></TabBarExample>*/}
            </div>
        );
    }
}

